<template>
  <el-form
    ref="loginForm"
    :model="loginFormData"
    status-icon
    :rules="commonRules"
    label-width="120px"
    class="demo-loginFormData"
  >
    <div class="common-login">
      <el-form-item label="用户名" prop="username" class="username-form-item">
        <el-input
          v-model="loginFormData.username"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginFormData.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input
          v-model="loginFormData.captcha"
          maxlength="5"
          class="captcha"
          @keydown.enter="submitForm(loginForm)"
        />
        <span
          v-loading="loading"
          class="captcha-svg"
          v-html="captcha"
          @click="getCaptcha"
        ></span>
      </el-form-item>
      <el-form-item id="button">
        <el-button type="primary" @click="submitForm(loginForm)">
          登入
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { commonRules, userSubmitForm } from "../../composition/login/validate";
import * as api from "@/api/users.js";
//引入路由对象
import { useRouter } from "vue-router";
//引入store
import { useUser } from "@/store/users.js";
//引入loading动画加载
import { ElLoading } from "element-plus";
let userStore = useUser();

let router = useRouter();
//控制loading的显示和隐藏
let loading = ref(true);
//表单校验成功之后，回调的方法
let validateSuccess = () => {
  //发起登录请求
  //校验验证码
  verifyCaptcha(loginFormData.captcha.toLowerCase());
  console.log(loginFormData.captcha.toLowerCase(), "校验成功");
};

//表单校验失败之后，回调的方法
let validateFailed = () => {
  console.log("校验失败");
};
let submitForm = userSubmitForm(validateSuccess, validateFailed);

const loginForm = ref();

const loginFormData = reactive({
  username: "",
  password: "",
  captcha: "",
});
let captcha = ref();

//获取验证码

let getCaptcha = async () => {
  //一旦发起请求，就要开启loading
  loading.value = true;
  let res = await api.getCaptchaApi();
  //关闭加载动画
  loading.value = false;
  // console.log(res);
  if (res.data.state) captcha.value = res.data.img;
};
//存储loading加载实例
let loadingInstance = null;
//校验验证码
//通过要配置本地代理
let verifyCaptcha = async (captcha) => {
  //发起loading加载
  loadingInstance = ElLoading.service({
    text: "正在登入...",
    background: "rgba(0,0,0,0.4)",
  });

  try {
    let res = await api.verifyCaptchaApi(captcha);
    //发起登录请求
    login(loginFormData.username, loginFormData.password);
  } catch (e) {
    console.log(e);
    getCaptcha();
    //关闭loading加载
    loadingInstance.close();
  }
};
//用户名密码登录
let login = async (username, password) => {
  try {
    let res = await api.loginApi(username, password);

    //存token
    sessionStorage.setItem("qf-token", res.data.token);
    //存储用户信息
    userStore.$patch({ userInfo: res.data.userInfo });
    router.push("/");
  } catch (e) {
    //关闭loading加载
    loadingInstance.close();
    console.log(e);
  }
};
onUnmounted(() => {
  //关闭loading加载
  loadingInstance && loadingInstance.close();
});
onMounted(() => {
  getCaptcha();
});
</script>
<style lang="less" scoped>
.common-login {
  padding-right: 50px;

  .el-form-item {
    margin-bottom: 20px;
    height: 44px;
    .captcha-svg {
      background: #fff;
      display: inline-block;
      height: 44px;
      width: 150px;
      text-align: center;
      cursor: pointer;
      border: 0;
      border-radius: 0 5px 5px 0;
      line-height: 40px;

      font-size: 14px;
    }
    :deep(.el-form-item__label) {
      color: #fff;
      width: 100px !important;
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      line-height: 44px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
    .el-button {
      width: 250px;
      height: 40px;
      background: linear-gradient(90deg, #1596fb, #002dff);
      display: inline-block;
      line-height: 1;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      text-align: center;
      box-sizing: border-box;
      margin: -20px;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
}

.el-form-item__content {
  margin-left: 120px !important;
  line-height: 44px;
  position: relative;

  font-size: 14px;
  .el-input {
    width: 250px;
    height: 44px;
    border-radius: 5px;
    position: relative;
    font-size: 14px;
    display: inline-block;
    :deep(.el-input__wrapper) {
      width: 100%;
      padding: 0;
      margin: 0;
      height: 44px !important;
    }
  }
  .captcha {
    display: flex;
    width: 100px;
    vertical-align: top;
    :deep(.el-input__wrapper) {
      border-right: 0 !important;
      border-radius: 5px 0 0 5px;
      box-shadow: none;
    }
  }
  span {
    background: #fff;
    display: inline-block;
    height: 45px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0 5px 5px 0;
  }
}
</style>
